<template>
  <div class="content" ref="content">
    <div class="search-item" v-for="(item,index) in configList" :key="index">
      <div class="name" v-if="item.showName">
        {{item.name}}：
      </div>
      <div class="mode">
        <el-input v-model="item.model" :placeholder="item.placeholder" v-if="item.type=='text'"></el-input>
        <el-select v-model="item.model" clearable :placeholder="item.placeholder" v-if="item.type=='select'" filterable>
          <el-option v-for="l in item.list" :key="l.value" :label="l.label" :value="l.value">
          </el-option>
        </el-select>
        <el-date-picker v-if="item.type == 'date'" v-model="item.model" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </div>
    <div class="submitBtn">
      <el-button type="warning" @click="handelClickSearch">搜索</el-button>
    </div>
  </div>
</template>

<script>
export default {
  // props: {
  //   configList: { type: Array }
  // },
  data () {
    return {
      configList: [{
        type: 'text',
        name: '任务项',
        showName: true,
        model: '',
        placeholder: '请输入任务项'
      }, {
        type: 'text',
        name: '验收部位',
        showName: true,
        model: '',
        placeholder: '请输入验收部位'
      }, {
        type: 'date',
        name: '日期区间',
        showName: true,
        model: '',
        placeholder: '请选择日期区间'
      }, {
        type: 'select',
        name: '状态',
        showName: true,
        model: '',
        placeholder: '请选择状态',
        list: [{ value: 1, label: '已派工' }, { value: 2, label: '已完成' }, { value: 3, label: '已下达' }, { value: 4, label: '已检验' }]
      }, {
        type: 'text',
        name: '作业负责人',
        showName: true,
        model: '',
        placeholder: '请选择作业负责人',
      }]

    }
  },
  mounted () {

  },
  methods: {
    handelClickSearch () {
      let searchArr = []
      this.configList.forEach(e => {
        searchArr.push({
          name: e.name,
          model: e.model
        })
      })
      console.log(searchArr)
      this.$emit('searchIsOk', searchArr)
    }
  }
}
</script>

<style lang="stylus" scoped>
.content {
  display flex
  flex-direction row
  flex-wrap wrap
  .search-item {
    display flex
    flex-direction row
    min-width 200px
    margin 0 10px 10px 0
    .name {
      display flex
      white-space nowrap
      align-items center
      margin-right 5px
    }
  }
}
</style>